<script setup>
import { onMounted, ref, onBeforeUnmount, computed } from 'vue';
import router from '@/router';
import { getCategoryTree } from '@/api/backend/content';
import { useToast } from 'primevue/usetoast';

const toast = useToast();
const cateData = ref([]);
const screenWidth = ref(window.innerWidth);
const isLoading = ref(false);

// 防抖处理窗口resize事件
let resizeTimer;
const updateScreenSize = () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
        screenWidth.value = window.innerWidth;
    }, 200);
};

// 响应式布局配置
const layoutConfig = computed(() => {
    const isMobile = screenWidth.value < 768;
    return {
        splitterLayout: isMobile ? 'vertical' : 'horizontal',
        panelSizes: isMobile ? [50, 50] : [20, 80],
        minSizes: isMobile ? [30, 30] : [15, 30]
    };
});

// 获取分类树数据
const fetchCategoryTree = async () => {
    try {
        isLoading.value = true;
        const res = await getCategoryTree();
        if (res.code === 200) {
            cateData.value = res.data;
        } else {
            throw new Error(res.message || '获取分类数据失败');
        }
    } catch (error) {
        toast.add({
            severity: 'error',
            summary: '加载失败',
            detail: error.message,
            life: 3000
        });
    } finally {
        isLoading.value = false;
    }
};

// 节点选择处理
function onNodeSelect(node) {
    if (node?.path) {
        router.push(node.path);
    }
}

onMounted(() => {
    window.addEventListener('resize', updateScreenSize);
    fetchCategoryTree();
});

onBeforeUnmount(() => {
    window.removeEventListener('resize', updateScreenSize);
    clearTimeout(resizeTimer);
});
</script>

<template>
    <div class="splitter-container">
        <Splitter :layout="layoutConfig.splitterLayout">
            <!-- 分类树面板 -->
            <SplitterPanel :size="layoutConfig.panelSizes[0]" :minSize="layoutConfig.minSizes[0]" class="tree-panel">
                <div class="panel-content">
                    <ProgressBar v-if="isLoading" mode="indeterminate" class="m-2" />
                    <Tree
                        :value="cateData"
                        selectionMode="single"
                        @node-select="onNodeSelect"
                        class="category-tree"
                        :pt="{
                            root: { class: 'bg-surface' },
                            node: { class: 'p-2' },
                            content: { class: 'hover:bg-gray-100' }
                        }"
                    />
                </div>
            </SplitterPanel>

            <!-- 内容展示面板 -->
            <SplitterPanel :size="layoutConfig.panelSizes[1]" :minSize="layoutConfig.minSizes[1]" class="content-panel">
                <div class="panel-content">
                    <router-view v-slot="{ Component }">
                        <Suspense>
                            <component :is="Component" />
                            <template #fallback>
                                <div class="text-center p-4"><i class="pi pi-spinner pi-spin" /> 加载中...</div>
                            </template>
                        </Suspense>
                    </router-view>
                </div>
            </SplitterPanel>
        </Splitter>
    </div>
</template>

<style scoped>
.splitter-container {
    height: calc(100vh - 1rem);
    margin: 0.5rem;
}

.panel-content {
    padding: 1rem;
    height: 100%;
    overflow: auto;
    background: var(--surface-card);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.tree-panel {
    min-width: 200px;
}

/* 移动端样式 */
@media (max-width: 768px) {
    :deep(.p-splitter) {
        flex-direction: column;
    }

    :deep(.p-splitter-gutter) {
        height: 10px;
        background: rgba(0, 0, 0, 0.05);
        transition: background 0.2s;
    }

    .tree-panel {
        min-height: 240px;
    }

    .category-tree :deep(.p-treenode-label) {
        font-size: 0.9rem;
    }
}

/* PC端样式 */
@media (min-width: 769px) {
    :deep(.p-splitter-gutter) {
        width: 10px;
        background: rgba(0, 0, 0, 0.05);
    }

    :deep(.p-splitter-gutter:hover) {
        background: var(--primary-color);
        opacity: 0.8;
    }

    .category-tree :deep(.p-treenode-label) {
        padding: 0.5rem 0;
    }
}

.category-tree {
    :deep(.p-tree-container) {
        padding: 0.5rem;
    }

    :deep(.p-treenode-content) {
        border-radius: 4px;
        margin: 2px 0;
    }
}
</style>
